<template>
  <div class="home-menu">
    <el-menu
      router
      :default-active="active"
      text-color="#fff"
      active-text-color="#409eff"
      background-color="#222832"
    >
      <el-menu-item
        v-for="item in routes"
        :key="item.name"
        :index="item.name"
        v-permission="item.meta.code"
      >
        <i :class="item.meta.icon"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>

      <!--    <el-menu-item index="bannersetting" v-permission="'0x101'">
        <i class="el-icon-picture-outline"></i>
        <span slot="title">轮播图</span>
      </el-menu-item>

      <el-menu-item index="goodssetting" v-permission="'0x101'">
        <i class="el-icon-wallet"></i>
        <span slot="title">热销商品</span>
      </el-menu-item>

      <el-menu-item index="productsetting" v-permission="'0x101'">
        <i class="el-icon-position"></i>
        <span slot="title">新品上线</span>
      </el-menu-item>

      <el-menu-item index="recommendsetting" v-permission="'0x101'">
        <i class="el-icon-thumb"></i>
        <span slot="title">为你推荐</span>
      </el-menu-item>

      <el-menu-item index="classification" v-permission="'0x102'">
        <i class="el-icon-tickets"></i>
        <span slot="title">分类管理</span>
      </el-menu-item>

      <el-menu-item index="goodsmanager" v-permission="'0x103'">
        <i class="el-icon-shopping-cart-full"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>

      <el-menu-item index="membermanager" v-permission="'0x104'">
        <i class="el-icon-user"></i>
        <span slot="title">会员管理</span>
      </el-menu-item>

      <el-menu-item index="ordermanager" v-permission="'0x105'">
        <i class="el-icon-s-order"></i>
        <span slot="title">订单管理</span>
      </el-menu-item> -->

      <el-menu-item index="7" disabled>
        <i class="el-icon-setting"></i>
        <span slot="title">系统设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
/* import { mapState } from "vuex"; */
export default {
  name: "home-menu",
  data() {
    return {
      active: "controlpanel",
    };
  },
  computed: {
    routes() {
      let routes = this.$router.getRoutes();
      let reg = /^\/home\/[\w\W]+$/;
      return routes.filter((item) => {
       return reg.test(item.path);
      });
    },
  },
  watch: {
    $route: {
      handler() {
        let { name } = this.$route;
        this.active = name || "controlpanel";
      },
      immediate: true,
      deep: true,
    },
  },
  /*  computed: {
    ...mapState(["info"]),
    power() {
      let info = this.info;
      return (info.power || "").split("|");
    },
  }, */
};
</script>

<style lang="less" scoped>
.el-menu {
  border-right: none;
}
</style>